<template>
  <div>
    <!-- 1.nav-bar：头部导航栏：修改背景色和文字颜色 -->
    <van-nav-bar title="黑马头条-登录" />
    <van-form @submit="onSubmit">
      <!-- 1.3引入表单组件完善样式和表单的校验规则
      required:标签名前面的*;校验规则默认失焦触发校验 -->
      <!-- 1.4<!一一正则表达式是以/开头/结尾
       匹配开头需要使用^;匹配结尾使用$;匹配数组使用\d;匹配几到几的数组使用[0-9];
       想要匹配几个{5};/^1[3-9]\d{9}$/-->
      <van-field
        v-model="formLogin.mobile"
        type="number"
        name="手机号"
        label="手机号"
        placeholder="请输入手机号"
        required
        :rules="[
          {
            required: true,
            message: '手机号没有写',
            pattern: /^1[3-9]\d{9}$/,
            trigger: 'onChange',
          },
        ]"
      />
      <van-field
        v-model="formLogin.code"
        type="password"
        name="密码"
        label="密码"
        placeholder="请输入密码"
        required
        :rules="[
          {
            required: true,
            message: '请填写密码',
            pattern: /^\d{6}$/,
            trigger: 'onChange',
          },
        ]"
      />
      <div style="margin: 16px">
        <!-- 1.6.防止用户多次点击登录按钮 给按钮设置loading状态和disabled禁用 默认false可以点击
        当点击登录网络开始请求的时候isLoading改为true，当网络请求成功或失败的数据的时候都需要把isLoading该成false -->
        <van-button
          round
          block
          type="info"
          native-type="submit"
          :loading="isLoading"
          :disabled="isLoading"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { Notify } from 'vant'
export default {
  name: 'Login',
  data () {
    return {
      formLogin: {
        mobile: '13888888888',
        code: '246810'
      },
      isLoading: false
    }
  },
  methods: {
    // 1.5调用接口的步骤
    // 引入接口
    // 在方法中调用接口
    // 调用接口时如果需要数需要将参数整理传入保证参数的数据类型和数据格式符合后端的需要
    // 定义变量接受返回值
    // 拿到登录接口需要传递表单数据this.formLogin得到数据有两个token,refresh_token解构
    // 1.7将得到的数据token,refresh_token存入vuex集中化管理;参考vuex
    // Notify登录成功或者失败提示框
    ...mapActions(['asyncLoginAction']),
    async onSubmit () {
      this.isLoading = true
      try {
        await this.asyncLoginAction(this.formLogin)
        // 成功通知
        Notify({ type: 'success', message: '登录成功' })
        this.isLoading = false
        // 1.8登陆成功下之后调转到layout页面
        // 路由调转的两个方法
        // this.$router.push 可以回退 有路由记录
        // this.$router.replace 不可可以回退 相当于路由的重置 ，没有历史记录
        this.$router.replace('layout')
      } catch (err) {
        console.log(err)
        Notify({ type: 'warning', message: '登录失败' })
        this.isLoading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
//1.1修改背景色：如果组件直接引入并且组件上带有class
//可以直接使用这个class改变组件的样式
.van-nav-bar{
    background-color: #057cff;
}
//1.2.修改头部导航字体颜色：
//如果想要改变引入组件的里面的dom上的样式 直接使用class类是不生效
//原因：因为组件上使用了scoped 在打包过程中会给dom添加了类用作样式隔离
//可以通过在类名前面加上/deep/实现类名穿透改变子组件的样式
//有三种预处理器不同使用的穿透符有所不同：scss --：：deep stylus-->>>
///deep/.van-nav-bar__title{
// color: #fff;
//}
</style>
